<template>
    <div id="createTeam">
      <el-form ref="form" :model="form" label-width="80px" label-suffix = ":" >
        <el-form-item label="团队名称">
          <el-input v-model="form.teamName" style="width: 255px;margin-right: 80px" :disabled=this.$store.state.createTeam_isShow></el-input>
        </el-form-item>

        <el-form-item label="团队简介">
          <el-input type="textarea" v-model="form.teamContent" style="width: 400px;margin-right: 80px" :disabled=this.$store.state.createTeam_isShow></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled=this.$store.state.createTeam_isShow>立即创建</el-button>
          <el-button @click="onReset" :disabled=this.$store.state.createTeam_isShow>取消</el-button>
        </el-form-item>
      </el-form>

    </div>
</template>

<script>
  import Axios from 'axios'

  //用axios进行前后端通信
  const instance = Axios.create({
    baseURL: 'http://localhost:8081/api/pri/team',
    timeout: 5000,
    headers: { "content-type": "application/json" }
  })

    export default {
        name: "createTeam",

        data() {
          return {
            form: {
              teamName: '',
              teamContent: ''
            }
          }
        },
        methods: {
          onSubmit() {
            if (this.form.teamName === '' || this.form.teamContent === ''){
              return alert("请填写团队名称或团队简介！");
            }
            else {
              instance.post('addTeam', this.form)
                .then(res => {
                  if (res.data.code === 0) {
                    this.$message({
                      message: this.form.teamName + "团队创建成功!",
                      type: "success"
                    })
                    this.$router.push({path: '/teamInformation', query: {teamId: res.data.teamId}});
                    this.$store.commit('updateCreateTeam_isShow', true);
                  } else {
                    this.$message({
                      message: this.form.teamName + "团队创建失败，请联系管理员!",
                      type: "error"
                    })
                  }

                })
                .catch(e => {
                  console.log(e.message);
                });
            }
          },
          onReset(){
            this.form.teamName='';
            this.form.teamContent='';
          }
        }
      }
</script>

<style scoped>

</style>
